import { Meta } from '@storybook/blocks';

import * as ExpansionPanelListStories from '../stories/ExpansionPanelList.stories';

<Meta of={ExpansionPanelListStories} />

# ExpansionPanelList

A material expansion panel list that lays out its children and animates expansions.

## Example

```dart liveslice=ExpansionPanelList height=400px
// stores ExpansionPanel state information
class Item {
  Item({
    this.expandedValue,
    this.headerValue,
    this.isExpanded = false,
  });

  String expandedValue;
  String headerValue;
  bool isExpanded;
}

List<Item> generateItems(int numberOfItems) {
  return List.generate(numberOfItems, (int index) {
    return Item(
      headerValue: 'Panel $index',
      expandedValue: 'This is item number $index',
    );
  });
}

// ...

List<Item> _data = generateItems(8);

@override
Widget build(BuildContext context) {
  return SingleChildScrollView(
    child: Container(
      child: _buildPanel(),
    ),
  );
}

Widget _buildPanel() {
  return ExpansionPanelList(
    expansionCallback: (int index, bool isExpanded) {
      setState(() {
        _data[index].isExpanded = !isExpanded;
      });
    },
    children: _data.map<ExpansionPanel>((Item item) {
      return ExpansionPanel(
        headerBuilder: (BuildContext context, bool isExpanded) {
          return ListTile(
            title: Text(item.headerValue),
          );
        },
        body: ListTile(
          title: Text(item.expandedValue),
          subtitle: Text('To delete this panel, tap the trash can icon'),
          trailing: Icon(Icons.delete),
          onTap: () {
            setState(() {
              _data.removeWhere((currentItem) => item == currentItem);
            });
          }
        ),
        isExpanded: item.isExpanded,
      );
    }).toList(),
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html
